<script setup>
import {getDatabaseConfigList, removeDatabaseConfig, saveDatabaseConfig} from "@/api/DatabaseConfigApi.js";
import {getCurrentInstance, onMounted, ref} from "vue";
import TipUtil from "@/utils/message.js";

const {proxy} = getCurrentInstance();

const dbConfigForm = ref('dbConfigForm');
const param = ref({
  searchParam: "",
  loading: false,
  tableData: []
});
const dialog = ref({
  visible: false,
  title: "新增",
  form: {
    name: "",
    driverClassName: "",
    url: "",
    username: "",
    password: "",
    dbType: "mysql"
  }
});
const rules = {
  name: [
    {required: true, message: '请输入数据源名称', trigger: 'blur'},
    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
  ],
  driverClassName: [
    {required: true, message: '请输入驱动类名称', trigger: 'blur'},
    {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
  ],
  url: [
    {required: true, message: '请输入链接地址', trigger: 'blur'},
    {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
  ],
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
  ],
  dbType: [
    {required: true, message: '请选择数据库类型', trigger: 'change'}
  ]
};


onMounted(() => {
  reloadTable();
});
const reloadTable = () => {
  param.value.loading = true;
  getDatabaseConfigList().then(res => {
    param.value.tableData = res.data;
    param.value.loading = false;
  }).catch(() => {
    param.value.loading = false;
  });
};
const handleDialog = (type, row) => {
  if (type === 'add') {
    dialog.value.title = '新增';
    row = {};
  } else if (type === 'edit') {
    dialog.value.title = '编辑';
  }
  dialog.value.visible = true;
  dialog.value.form.id = row.id;
  dialog.value.form.name = row.name;
  dialog.value.form.driverClassName = row.driverClassName;
  dialog.value.form.url = row.url;
  dialog.value.form.username = row.username;
  dialog.value.form.password = row.password;
  dialog.value.form.dbType = row.dbType;
};
const confirmForm = () => {
  proxy.$refs.dbConfigForm.validate((valid) => {
    if (!valid) {
      TipUtil.warning('请填写表单');
      return;
    }
    saveDatabaseConfig(dialog.value.form).then(res => {
      TipUtil.success(res.message);
      reloadTable();
      dialog.value.visible = false;
    });
  });
};
const handleDelete = (row) => {
  removeDatabaseConfig(row.id).then(res => {
    TipUtil.success(res.message);
    reloadTable();
  });
};
</script>

<template>
  <el-row class="db-container">
    <el-col :span="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>数据库链接管理</span>
            <span class="right"><el-button @click="handleDialog('add')" size="small"
                                           type="primary">新增</el-button></span>
          </div>
        </template>
        <el-table v-loading="param.loading" :data="param.tableData" border style="width: 100%">
          <el-table-column prop="name" label="数据源名称" width="180"/>
          <el-table-column prop="dbType" label="数据库类型" width="180"/>
          <el-table-column prop="driverClassName" label="驱动类名称"/>
          <el-table-column prop="url" label="链接地址" width="180"/>
          <el-table-column prop="username" label="用户名" width="180"/>
          <el-table-column prop="createTime" label="创建时间" width="180"/>
          <el-table-column align="right">
            <template #default="scope">
              <el-button size="small" @click="handleDialog('edit', scope.row)">
                编辑
              </el-button>
              <el-popconfirm title="确定删除当前记录吗？" @confirm="handleDelete(scope.row)">
                <template #reference>
                  <el-button size="small" type="danger">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>

  <el-dialog v-model="dialog.visible" :title="dialog.title" width="500" :close-on-click-modal="false">
    <el-form ref="dbConfigForm" :rules="rules" :model="dialog.form">
      <el-form-item label="数据库类型" :label-width="120" prop="dbType">
        <el-select v-model="dialog.form.dbType" placeholder="请选择数据库类型">
          <el-option label="mysql" value="mysql"/>
        </el-select>
      </el-form-item>
      <el-form-item label="驱动类名称" :label-width="120" prop="driverClassName">
        <el-input v-model="dialog.form.driverClassName" autocomplete="off" placeholder="请输入驱动类名称"/>
      </el-form-item>
      <el-form-item label="数据源名称" :label-width="120" prop="name">
        <el-input v-model="dialog.form.name" autocomplete="off" placeholder="请输入数据源名称"/>
      </el-form-item>
      <el-form-item label="用户名" :label-width="120" prop="username">
        <el-input v-model="dialog.form.username" autocomplete="off" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="120" prop="password">
        <el-input v-model="dialog.form.password" autocomplete="off" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="链接地址" :label-width="120" prop="url">
        <el-input v-model="dialog.form.url" autocomplete="off" placeholder="请输入链接地址"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmForm">
          确定
        </el-button>
        <el-button size="small" @click="dialog.visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.db-container {
  padding: 40px;
}

.right {
  float: right;
}
</style>